<template>
  <div id="market-detail">
    <!-- <Breadcrumb /> -->
    <div class="container">
      <div class="common-detail">
        <div class="info-title">基本详情</div>
        <div class="detail-box">
          <div class="detail-left">
            <div class="img-top-box">
              <img src="@/assets/images/icon_left.png" class="left-icon" @click="prev"/>
              <img :src="picList[curIdx].picUrl" class="info-img" v-if="picList[curIdx]" />
              <img src="@/assets/images/icon_right.png" class="right-icon" @click="next" />
            </div>
            <div class="pic-count">{{curIdx + 1}}/{{picList.length}}</div>
          </div>
          <div class="detail-right">
            <p class="detail-title">
              <span>{{detailData.ncMaterielName}}</span>
              <span class="state" :class="{success: detailData.status === 'YWC'}">{{$enums.order.orderStatus[detailData.status]}}</span>
            </p>
            <p class="detail-spec"></p>

            <!-- <a-divider /> -->
            <div class="detail-item">
              <div class='item'>
                <div class="item-label">规格：</div>
                <div class="item-value">{{detailData.goodsSpec?detailData.goodsSpec:'-'}}</div>
              </div>
              <div class='item'>
                <div class="item-label">型号：</div>
                <div class="item-value">{{detailData.goodsModel?detailData.goodsModel:'-'}}</div>
              </div>
              <div class='item'>
                <div class="item-label">单位：</div>
                <div class="item-value">{{detailData.goodsUnit?detailData.goodsUnit:'-'}}</div>
              </div>
              <div class='item'>
                <div class="item-label">数量：</div>
                <div class="item-value">{{detailData.upNumber}}</div>
              </div>
              <div class='item'>
                <div class="item-label">单价：</div>
                <div class="item-value">{{detailData.unitPrice}}元</div>
              </div>
              <div class='item'>
                <div class="item-label">金额：</div>
                <div class="item-value">{{detailData.totalPrice}}</div>
              </div>
              <div class='item'>
                <div class="item-label">项目：</div>
                <div class="item-value">{{detailData.ncProjectName}}</div>
              </div>
              <div class='item'>
                <div class="item-label">所属组织：</div>
                <div class="item-value">{{detailData.orgName}}</div>
              </div>
              <div class='item' v-if="orderId">
                <div class="item-label">购入单位：</div>
                <div class="item-value">{{detailData.warehouseName}}</div>
              </div>
              <div class='item' v-if="orderId">
                <div class="item-label">预订数量：</div>
                <div class="item-value">{{detailData.number}} {{detailData.goodsUnit}}</div>
              </div>
              <div class='item' v-if="orderId">
                <div class="item-label">预订时间：</div>
                <div class="item-value">{{detailData.createTime}}</div>
              </div>
              <div class='item' v-if="orderId && ['DSH', 'YWC'].includes(detailData.status)">
                <div class="item-label">发货数量：</div>
                <div class="item-value">{{detailData.sendNum}} {{detailData.goodsUnit}}</div>
              </div>
              <div class='item' v-if="orderId && ['DSH', 'YWC'].includes(detailData.status)">
                <div class="item-label">发货时间：</div>
                <div class="item-value">{{detailData.sendTime}}</div>
              </div>
              <div class='item' v-if="orderId">
                <div class="item-label">发货单价：</div>
                <div class="item-value">{{detailData.sendPrice}}元/{{detailData.goodsUnit}}</div>
              </div>
              <div class='item' v-if="orderId && ['YWC'].includes(detailData.status)">
                <div class="item-label">收货单价：</div>
                <div class="item-value">{{detailData.collectPrice}}元/{{detailData.goodsUnit}}</div>
              </div>
              <div class='item' v-if="orderId && ['YWC'].includes(detailData.status)">
                <div class="item-label">收货数量：</div>
                <div class="item-value">{{detailData.collectNum}} {{detailData.goodsUnit}}</div>
              </div>
              <div class='item' v-if="orderId && ['YWC'].includes(detailData.status)">
                <div class="item-label">确认收货时间：</div>
                <div class="item-value">{{detailData.collectTime}}</div>
              </div>
              <div class='item'>
                <div class="item-label">地址：</div>
                <div class="item-value">{{detailData.address}}</div>
              </div>
              <div class='item'>
                <div class="item-label">联系人：</div>
                <div class="item-value">{{detailData.linkMan}}</div>
              </div>

              <div class='item'>
                <div class="item-label">电话：</div>
                <div class="item-value">{{detailData.linkPhone}}</div>
              </div>


              <div class="item" v-if="!orderId">
                <div class="item-label">物资描述：</div>
                <div class="item-value">{{detailData.goodsDesc}}</div>
              </div>
            </div>
            <div class="detail-bottom">
              <!-- <span class="detail-price">{{detailData.unitPrice}}元/{{$enums.goods.goodsUnit[detailData.goodsUnit]}}</span> -->
              <a-button type="primary" class="reserve-btn" v-if="detailData.status === 'YSJ'" @click="reserveMaterial(detailData)">立即预定</a-button>
              <a-button type="primary" class="reserve-btn" v-if="detailData.status === 'DSH' && saleType !== 'out'" @click="showConfirmDialog">确认收货</a-button>
              <div class="sale-out" v-if="detailData.status === 'YSQ'">已售完</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <CommonDialog
      :rows="rows"
      :form="form"
      :labelWidth="120"
      title="填写预定信息"
      :visible="formVisible"
      @hideDialog="hideVisible"
      @confirm="confirmHandle"
    >
    </CommonDialog>
    <CommonDialog
      :rows="order.rows"
      :form="order.form"
      :labelWidth="120"
      title="确认收货信息"
      :visible="order.visible"
      @hideDialog="order.visible = false"
      @confirm="confirmOrder"
    />
  </div>
</template>
<script lang='ts'>
import { Validate } from '@/decorator'
import { Component, Watch, Vue } from 'vue-property-decorator'

@Component
export default class aduit extends Vue {
  formVisible: boolean = false; // 预定弹窗
  detailData: any = {}
  projects: any = [] // 购入单位
  warehouses: any = [] // 购入仓库
  warehousesList: any = [] // 购入仓库 用来筛选
  warehousesListTwo: any = [] // 购入仓库 用来筛选
  get rows () {
    return {
      num: {
        el: 'inputNumber',
        label: '预订数量',
        class: true,
        placeholder: '不得大于上架数量',
        rules: [{ required: true, message: '请输入预订数量', trigger: 'blur' }]
      },
      ncProjectId: {
        label: '购入项目:',
        el: 'select',
        placeholder: '请选择购入项目',
        options: this.projects,
        rules: [{ required: true, message: '请选择购入项目', trigger: 'change' }],
        callback: (val:any) => this.selectCompany(val)
      },
      orgName: {
        label: '购入组织:',
        el: 'input',
        placeholder: '请选择购入组织',
        showDisabled: true,
        rules: [{ required: true, message: '请选择购入组织', trigger: 'blur' }]
      },
      ncWarehouseId: {
        label: '购入仓库:',
        el: 'select',
        placeholder: '请选择购入仓库',
        showSearch: true,
        options: this.warehouses,
        rules: [{ required: true, message: '请选择购入仓库', trigger: 'change' }]
      },
      rec_man: {
        label: '联系人',
        placeholder: '请输入联系人',
        rules: [{ required: true, message: '请输入联系人', trigger: 'blur' }]
        // showDisabled: true
      },
      rec_phone: {
        label: '联系电话',
        placeholder: '请输入联系电话',
        rules: [{ required: true, message: '请输入联系电话', trigger: 'blur' }]
        // showDisabled: true
      },
      rec_address: {
        label: '地址:',
        el: 'textarea',
        placeholder: '请输入地址',
        // showDisabled: true,
        rows: 3,
        rules: [{ required: true, message: '请输入地址', trigger: 'blur' }]
      }
    }
  }
  form: any = {
    num: '',
    orgName: undefined,
    orgCode: undefined,
    ncWarehouseId: undefined,
    rec_man: '',
    rec_phone: '',
    rec_address: '',
    ncProjectId: undefined
  }
  picList: any[] = []
  picBox: any[] = []
  curIdx: number = 0
  step: number = 0
  order: any = {
    rows: {
      sendNum: {
        label: '发货数量',
        showDisabled: true
      },
      collectNum: {
        el: 'inputNumber',
        label: '收货数量',
        placeholder: '请输入',
        rules: [{ required: true, message: '请输入收货数量', trigger: 'blur' }]
      },
      sendPrice: {
        label: '发货单价',
        showDisabled: true
      },
      collectPrice: {
        el: 'inputNumber',
        label: '收货单价',
        placeholder: '请输入',
        rules: [{ required: true, message: '请输入收货单价', trigger: 'blur' }]
      }
    },
    form: {
      orderId: '',
      sendNum: '',
      collectNum: '',
      sendPrice: '',
      collectPrice: ''
    },
    visible: false
  }

  get goodsId () {
    return this.$route.query.goodsId
  }

  get orderId () {
    return this.$route.query.orderId
  }

  get saleType () {
    return this.$route.query.saleType
  }
  getGoodsUnit (value:any) {
    let status
    switch (value) {
      case 'D':
        status = '吨'
        break;
      case 'LFM':
        status = '立方米'
        break;
      case 'M':
        status = '米'
        break;
      case 'PFM':
        status = '平方米'
        break;
    }
    return status
  }

  init () {
    this.getDetail()
    this.getDetailPic()
    this.getProjects()
  }
  getDetail () {
    const apiFetch = this.orderId ? this.$api.orderDetailFetch : this.$api.goodsDetailFetch
    const data = this.orderId ? {
      order_id: this.orderId
    } : {
      goods_id: this.goodsId
    }
    apiFetch(data).then((res: any) => {
      this.detailData = res.data
      // this.getWarehouses()
    });
  }
  getDetailPic () {
    const apiFetch = this.orderId ? this.$api.orderPicListFetch : this.$api.goodsPicListFetch
    const data = this.orderId ? {
      order_id: this.orderId
    } : {
      goods_id: this.goodsId
    }
    apiFetch(data).then((res: any) => {
      this.picList = res.data
      this.picList.forEach((item, index) => { item.index = index })
      this.picBox = this.picList.slice(this.step, this.step + 4)
    })
  }
  getProjects () {
    this.$api.memberProjectListFetch().then((res: any) => {
      this.projects = res.data.map((item: any) => ({label: item.ncProjectName, value: item.ncProjectId, pkOrg: item.pkOrg}))
    })
  }
  // 选择购入单位
  selectCompany (val:any) {
    this.$set(this.form, 'ncWarehouseId', '')
    let list = this.projects.filter((item:any) => { return item.value === val })
    let pkOrg = list[0].pkOrg
    this.getWarehouses(val, pkOrg)
  }
  getWarehouses (val:any, pkOrg:any) {
    let data = {
      ncProjectId: val,
      pkOrg
    }
    this.$api.orderWarehouseListFetch(data).then((res: any) => {
      this.warehouses = res.data.map((item: any) => ({label: item.ncWarehouseName, value: item.ncWarehouseId}))
      if (res.data.length > 0) {
        this.form.orgName = res.data[0].orgName
        this.form.orgCode = res.data[0].orgCode
      } else {
        this.form.orgName = ''
        this.form.orgCode = ''
      }
    })
  }
  prev () {
    const newIdx = this.curIdx - 1
    this.curIdx = newIdx < 0 ? 0 : newIdx
  }
  next () {
    const newIdx = this.curIdx + 1
    this.curIdx = newIdx > this.picList.length - 1 ? this.curIdx : newIdx
  }
  // 填写预定
  confirmHandle () {
    this.$api.orderAddOrderFetch({
      goodsId: this.goodsId,
      ...this.form
    }).then((res: any) => {
      this.$message.success('预订成功')
      this.formVisible = false
      this.getDetail()
      this.$router.push('/allot/market')
    })
  }
  reserveMaterial (item:any) {
    // this.formVisible = true
    this.$router.push({path: '/allot/market/bulkOrder', query: {ncProjectId: item.ncProjectId, goodsId: item.goodsId}})
  }
  hideVisible () {
    this.form = {
      num: '',
      orgName: undefined,
      orgCode: undefined,
      ncWarehouseId: undefined,
      rec_man: '',
      rec_phone: '',
      rec_address: '',
      ncProjectId: undefined
    }
    this.formVisible = false
  }
  showConfirmDialog () {
    const { orderId, sendNum, sendPrice } = this.detailData
    this.order.form = Object.assign({}, this.order.form, {
      orderId,
      sendNum,
      sendPrice
    })
    this.order.visible = true
  }
  confirmOrder () {
    const { orderId: order_id, collectNum: collect_num, collectPrice: collect_price } = this.order.form
    this.$api.orderHadReceiveFetch({
      collect_num,
      collect_price,
      order_id
    }).then((res: any) => {
      this.$message.success('确认收货成功')
      this.order.visible = false
      this.getDetail()
    })
  }
}
</script>
<style lang='scss' scoped>
#market-detail {
  .financing {
    width: 33%;
    border-right: 1px solid #c9c9c9;
  }
  .loan {
    width: 35%;
    padding-left: 2%;
  }
  .common-detail {
    .detail-box {
      width: 100%;
      display: flex;
      align-items: center;
      .detail-left {
        width: 552px;
        margin-right: 49px;
        flex-shrink: 0;
        .img-top-box {
          width: 552px;
          height: 414px;
          position: relative;
          margin-bottom: 8px;
          .info-img {
            width: 100%;
            height: 100%;
            user-select: none;
          }
          .left-icon,
          .right-icon {
            width: 24px;
            height: 24px;
            position: absolute;
            top: 50%;
            left: 8px;
            transform: translateY(-50%);
            cursor: pointer;
          }
          .right-icon {
            right: 8px;
            left: initial;
          }
        }
        .pic-count {
          font-size: 12px;
          color: #999;
          width: 100%;
          text-align: center;
        }
      }
      .detail-right {
        width: 686px;
        .detail-item{
          .item{
            display: flex;
            height: 30px;
            .item-label {
              width: 70px;
              font-size: 14px;
              font-weight: 700;
              color: #000;
              margin-right: 16px;
              flex-shrink: 0;
            }
            .item-value {
              font-size: 14px;
              color: #666;
            }
          }
        }
        .detail-title {
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 4px;
          span {
            font-size: 20px;
            color: #000;
          }
          .state {
            color: #E14C46;
          }
          .success {
            color: #86e835;
          }
        }
        .detail-spec {
          font-size: 13px;
          color: #999;
          margin-bottom: 21px;
        }
        .detail-desc {
          p {
            font-size: 16px;
            color: #333;
            margin-bottom: 2px;
          }
        }
        .ant-row {
          .ant-col {
            display: flex;
            margin-bottom: 16px;
            margin-right: 28px;
            &:nth-of-type(2n) {
              margin-right: 0;
            }

          }
        }
        .detail-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 80px;
          .detail-price {
            font-size: 18px;
            color: #333;
            font-weight: 800;
          }
          .reserve-btn,
          .sale-out {
            width: 96px;
            height: 40px;
            border-radius: 2px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .reserve-btn {
            background: #2572fa;
          }
          .sale-out {
            background: #9e9e9e;
          }
        }
      }
    }
  }
}
</style>
